<template>
  <div>
    <van-grid :border="false" :column-num="5" clickable>
      <van-grid-item v-for="(item,index) of navlist" :key="index" @click="navfn1(item.type)">
        <div>
          <img :src="item.pic" alt="" style="width: .5rem;height:.5rem;"/>
        </div>
        <p style="text-align:center;line-height:.35rem;">{{ item.type }}</p>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import Vue from 'vue'
import { Grid, GridItem } from 'vant'
// 引入本地图片路径
import img1 from '../assets/images/tubiao-mianbulunkuo.png'
import img2 from '../assets/images/tubiao-boniaosuan.png'
import img3 from '../assets/images/tubiao-chuzhoushoulian.png'
import img4 from '../assets/images/tubiao-yanbu.png'
import img5 from '../assets/images/tubaio-bibu.png'
import img6 from '../assets/images/tubiao-zhigfangtianchong.png'
import img7 from '../assets/images/tubiao-shenghuomeirong.png'
import img8 from '../assets/images/tubiao-xiongbu.png'
import img9 from '../assets/images/tubiao-meitisuxing.png'
import img10 from '../assets/images/teeth.png'
Vue.use(Grid)
Vue.use(GridItem)
export default {
  data () {
    return {
      // 在未得到nav导航接口时，采用手写数据
      // 本地图片通过绑定进行解析需要先引入图片路径，否则图片渲染失败
      navlist: [
        { type: '面部轮廓', pic: img1 },
        { type: '玻尿酸', pic: img2 },
        { type: '除皱瘦脸', pic: img3 },
        { type: '眼部', pic: img4 },
        { type: '鼻部', pic: img5 },
        { type: '脂肪填充', pic: img6 },
        { type: '生活美容', pic: img7 },
        { type: '胸部', pic: img8 },
        { type: '美体塑形', pic: img9 },
        { type: '口腔齿科', pic: img10 }
      ]
    }
  },
  methods: {
    // 点击nav导航触发事件并接收参数
    navfn1 (type) {
      this.$router.push({ path: '/kind/' + type })
    }
  }
}
</script>

<style lang="scss" scoped>
.van-grid {
  margin: 0 .18rem 0;
}
/deep/ .van-grid-item__content {
  padding: 0;
  color:#464646;
  overflow: hidden;
  -webkit-transform-origin-x: 0;
  -webkit-transform: scale(0.91);
}
</style>
